<template>
  <div class="t-form-theme-wrap">
    <div v-if="!updateSuccess">
      <div class="header">
        <p>{{ projectRenderFormKey === "1" ? $t("rform.answerResult.myRecord") : $t("rform.answerResult.updated") }}</p>
        <el-button
          type="primary"
          link
          @click="handleEditForm"
          icon="ele-Edit"
          v-if="projectRenderFormKey === '1' && showUpdateBtn"
        >
          {{ $t("rform.answerResult.update") }}
        </el-button>
      </div>
      <biz-project-form
        v-if="formConfig.formKey"
        :key="projectRenderFormKey"
        ref="bizProjectFormRef"
        :form-config="formConfig"
        :form-data="formData"
        :form-data-id="formDataId"
        style="height: calc(100vh - 20px)"
        @submit="handleSubmitFormData"
      />
    </div>
    <div
      v-if="updateSuccess"
      class="vh100 flex-center"
    >
      <el-result
        icon="success"
        :title="$t('rform.answerResult.updateSuccess')"
      >
        <template #extra>
          <el-button @click="handleFlushed">
            {{ $t("rform.answerResult.viewData") }}
          </el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup lang="ts" nmae="AnswerResult">
import { useRoute } from "vue-router";
import { onMounted, provide, ref } from "vue";
import { getFormDataRequest, updateFormDataByDataIdRequest, UserFormData } from "@/api/project/data";
import BizProjectForm from "@/views/formgen/components/BizProjectForm/index.vue";
import { ResultData } from "@/api/types";
import { getPublicSettingsRequest } from "@/api/project/setting";
import { FORM_DISABLED_KEY, USER_FORM_STATE_KEY } from "@/views/formgen/components/GenerateForm/types/constants";
import { FormConfigType, getDefaultFormConfig } from "@/views/formgen/components/GenerateForm/types/form";
import { useUserForm } from "@/views/formgen/components/GenerateForm/hooks/useUserForm";

const route = useRoute();
const formConfig = ref<FormConfigType>({
  ...getDefaultFormConfig(),
  disabled: true
});

// 有些地方表单自带的禁用不生效 这里再搞一个
const formDisabled = ref(true);

provide(FORM_DISABLED_KEY, formDisabled);

const showUpdateBtn = ref(false);

const projectRenderFormKey = ref<string>("1");

const userFormStore = useUserForm();
const { submitLoading } = userFormStore;
provide(USER_FORM_STATE_KEY, userFormStore);

const formData = ref<any>({});
const formDataId = ref<number>(0);

onMounted(() => {
  getFormDataRequest(route.query.id as string).then((res: ResultData<UserFormData>) => {
    formDataId.value = res.data.id as number;
    formData.value = res.data.originalData;
    formConfig.value.formKey = res.data.formKey;
    // 查询设置 是否允许修改
    getPublicSettingsRequest(formConfig.value.formKey).then((res: any) => {
      showUpdateBtn.value = res.data.updateSubmitContentBtn;
    });
    if (route.query.isUpdate) {
      handleEditForm();
    }
  });
});

const handleEditForm = () => {
  formConfig.value.disabled = false;
  formDisabled.value = false;
  projectRenderFormKey.value = new Date().getTime() + "";
};

const updateSuccess = ref(false);

const handleSubmitFormData = (data: any) => {
  try {
    let submitFormData = {
      ...data,
      dataId: route.query.id
    };
    updateFormDataByDataIdRequest(submitFormData).then(() => {
      updateSuccess.value = true;
    });
  } catch (e) {
    console.error(e);
  } finally {
    submitLoading.value = false;
  }
};

// 刷新当前页面
const handleFlushed = () => {
  window.location.reload();
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  box-shadow: var(--el-box-shadow);
  line-height: 40px;
  height: 40px;

  .el-button {
    margin-left: 20px;
  }

  .p {
    font-size: 16px;
  }
}
</style>
